<template>
  <div>
    <el-dialog title="添加变量字段" v-model="visible">
      <div class="box">
        <el-checkbox-group v-model="vals">
          <div
            class="bg-[#fafafa] rounded-[6px] px-[16px] py-[5px] mb-[10px] flex justify-between items-center items"
          >
            <el-checkbox label="1"> 订单信息 </el-checkbox>
            <Icon icon="ep:arrow-down" :size="14" />
          </div>
          <div class="px-[15px] mb-[10px] sub">
            <el-checkbox-group v-model="values">
              <el-checkbox label="1"> 订单编号 </el-checkbox>
              <el-checkbox label="2"> 下单时间 </el-checkbox>
              <el-checkbox label="3"> 订单状态 </el-checkbox>
              <el-checkbox label="4"> 订单金额 </el-checkbox>
              <el-checkbox label="5"> 订单商品数量 </el-checkbox>
            </el-checkbox-group>
          </div>
          <div
            class="bg-[#fafafa] rounded-[6px] px-[16px] py-[5px] mb-[10px] flex justify-between items-center items"
          >
            <el-checkbox label="2"> 商品信息 </el-checkbox>
            <Icon icon="ep:arrow-down" :size="14" />
          </div>
          <div class="px-[15px] mb-[10px] sub">
            <el-checkbox-group v-model="values">
              <el-checkbox label="1"> 订单编号 </el-checkbox>
              <el-checkbox label="2"> 下单时间 </el-checkbox>
              <el-checkbox label="3"> 订单状态 </el-checkbox>
              <el-checkbox label="4"> 订单金额 </el-checkbox>
              <el-checkbox label="5"> 订单商品数量 </el-checkbox>
            </el-checkbox-group>
          </div>
          <div
            class="bg-[#fafafa] rounded-[6px] px-[16px] py-[5px] mb-[10px] flex justify-between items-center items"
          >
            <el-checkbox label="3"> 用户信息 </el-checkbox>
            <Icon icon="ep:arrow-down" :size="14" />
          </div>
          <div class="px-[15px] mb-[10px] sub">
            <el-checkbox-group v-model="values">
              <el-checkbox label="1"> 订单编号 </el-checkbox>
              <el-checkbox label="2"> 下单时间 </el-checkbox>
              <el-checkbox label="3"> 订单状态 </el-checkbox>
              <el-checkbox label="4"> 订单金额 </el-checkbox>
              <el-checkbox label="5"> 订单商品数量 </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-checkbox-group>
      </div>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="hide" style="border-radius: 6px !important; width: 109px"
            >取消</el-button
          >
          <el-button
            type="primary"
            color="#3721FF"
            @click="hide"
            style="border-radius: 6px !important; width: 109px"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const visible = ref(false)

const vals = ref([])
const values = ref([])

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped></style>
